<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">业务管理 / 业务订单 / 查看</p>
      <div class="content">
        <div class="basicInfo">基本信息</div>
        <div class="basicInfo1">
          <el-form :model="form" label-width="100px">
            <el-form-item class="list" label="机构类型">{{form.agtType==0?"OEM":form.agtType==1?"普通代理":"渠道机构"}}</el-form-item>
            <el-form-item class="list" label="机构名称">{{form.officeName?form.officeName:""}}</el-form-item>
            <el-form-item class="list" label="机构ID">{{form.officeUid?form.officeUid:""}}</el-form-item>
            <el-form-item class="list" label="业务类型">{{form.busName?form.busName:""}}</el-form-item>
            <el-form-item class="list" label="业务品牌">{{form.channelName?form.channelName:""}}</el-form-item>
            <el-form-item class="list" label="业务订单号">{{form.orderCode?form.orderCode:""}}</el-form-item>
            <el-form-item class="lists" label="推广名称">{{form.typeName?form.typeName:""}}</el-form-item>
          </el-form>
        </div>
        <div class="basicInfo">业务订单状态</div>
        <div class="basicInfo2">
          <div class="contt">
            <div class="contt_son">业务总成本：{{form.inFeeSum}} 元</div>
            <div class="contt_son">已分润：{{form.outFeeSum}} 元</div>
          </div>
          <el-steps :active="followActive">
            <el-step
              v-for="(value, key) in followOptions"
              :key="key"
              :title="value.title"
              :icon="value.descriptions"
            >
              <template slot="description" v-if="value.status==2">
                <span>{{ value.callbackDate }}<br />成本 {{ value.inFee }} 元<br/>分润 {{value.outFee}} 元</span>
              </template>
            </el-step>
          </el-steps>
        </div>
        <div class="back">
          <el-button @click="back">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import https from "../../plugins/https.js"
export default {
  data() {
    return {
      form: {},
      followActive:"",
      followOptions:[
      ]
    };
  },
  created(){
    https.getBusOrderInfo({id:this.$route.query.id}).then(res=>{
      if(res.data.code=="0000"){
        this.form=res.data.busOrderResponse
        this.followOptions=res.data.busOrderStatusResponseList
        this.followActive=res.data.busOrderStatusResponseList.length
      }
    })
  },
  methods:{
    back(){
      this.$router.go(-1)
    }
  }
};
</script>

<style scoped>
.basicInfo {
  width: calc(100% - 40px);
  margin: 20px;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  float: left;
  font-size: 18px;
}
.basicInfo1 {
  width: calc(100% - 40px);
  margin-left: 20px;
  /* height: 40px; */
  line-height: 40px;
  padding-left: 20px;
  background: #f9fafc;
  float: left;
}
.basicInfo2 {
  width: calc(100% - 40px);
  margin-left: 20px;
  /* height: 40px; */
  line-height: 40px;
  padding: 20px;
  background: #f9fafc;
  float: left;
}
.list {
  width: 500px;
}
/deep/ .el-step__description.is-finish{
  color: #000
}
/deep/ .el-step__icon.is-icon{
  background: #f9fafc;
  /* width:100%; */
}
/deep/ .el-step__head.is-finish{
  height: 26px;
}
/deep/ .el-step.is-horizontal{
  flex-basis:20% !important;
}
.back{
  margin-top: 20px;
  float: left;
  margin-left: 48%
}
.contt{
  height: 60px;
}
.contt_son{
  width: 300px;
  float: left;
}
.lists{
  width:100%
}
</style>
